import DefaultImage from '@/asset/default-image.png';
import ErrorComp from '@/components/common/error-comp';
import ImagePreview from '@/components/common/image-preview';
import LeftToRightView from '@/components/common/motion/left-to-right-view';
import QueryImage from '@/components/common/query-image';
import EditShopInfo from '@/components/shop/edit-shop-info';
import ShopImageUpload from '@/components/shop/shop-image-upload';
import ShopStatusBadge from '@/components/shop/shop-status-badge';
import UploadQualification from '@/components/shop/upload-qualification';
import { getShop } from '@/service/query/shop';
import dayjs from 'dayjs';

export const metadata = {
  title: '商铺信息',
};

export default async function Page() {
  const { result: shopData, error } = await getShop();
  if (error) return <ErrorComp message={error.message} />;

  return (
    <LeftToRightView>
      <div className="p-5 rounded-lg bg-background space-y-8">
        <h1 className="text-2xl font-semibold">商铺信息</h1>
        <UploadQualification shopData={shopData} />
        <div className="space-y-4">
          <div className="font-bold">基本信息</div>
          {[
            {
              label: '商铺ID: ',
              value: shopData.id,
            },
            {
              label: '名称: ',
              value: shopData.name,
            },
            {
              label: '简介: ',
              value: shopData.description,
            },
            {
              label: '地址: ',
              value: shopData.address,
            },
            {
              label: '联系电话: ',
              value: shopData.contactPhone,
            },
            {
              label: '营业时间: ',
              value: `${shopData.startTime} - ${shopData.endTime}`,
            },
            {
              label: '起送费: ',
              value: `${shopData.deliveryMinPrice} 元`,
            },
            {
              label: '注册时间: ',
              value: dayjs(shopData.createdAt).format('YYYY-MM-DD HH:mm:ss'),
            },
            {
              label: '状态: ',
              value: (
                <div className="flex items-center gap-4">
                  <ShopStatusBadge status={shopData.status} />
                  {shopData.status === 'rejected' && (
                    <span>驳回理由：{shopData.rejectReason}</span>
                  )}
                  {shopData.status === 'warning' && (
                    <span>警告理由：{shopData.warningReason}</span>
                  )}
                </div>
              ),
            },
          ].map(({ label, value }) => (
            <div key={label} className="flex items-center">
              <div className="w-0 text-nowrap">{label}</div>
              <div className="text-sm ml-32">{value}</div>
            </div>
          ))}
          <EditShopInfo preData={shopData} />
        </div>
        <div className="space-y-4">
          <div className="font-bold">商铺图片</div>
          <div className="flex gap-2">
            {shopData.imageKeys.map((key) => (
              <ImagePreview
                key={key}
                imageKey={key}
                button={
                  <QueryImage
                    key={key}
                    imageKey={key}
                    defaultImage={DefaultImage}
                    wrapperClassName="w-32 h-24"
                    imgClassName="w-full h-full object-cover"
                  />
                }
              />
            ))}
          </div>
          <ShopImageUpload
            userId={shopData.userId}
            imageKeys={shopData.imageKeys}
          />
        </div>
      </div>
    </LeftToRightView>
  );
}
